<template>
  <div class="app">
    <!-- header 头部 商家 -->
    <Header> </Header>
<!-- 选项卡 -->
    <div class="tabs">
      <ul>
        <li><router-link to="/goods">商品</router-link></li>
        <li><router-link to="/rating">评价</router-link></li>
        <li><router-link to="/seller">商家</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
   <!-- 购物车 -->
    <div class="carList" v-show="$store.state.show">
      <div class="mask"></div>
      <ul>
        <li :style="{color,fontSize,backgroundColor,borderBottom,height,textAlign,lineHeight}">
          <span class="sp1">购物车</span>
          <span class="sp" @click="clearList">清空</span>
        </li>
        <li v-for="item in carList" :key="item.name" class="carLi">
         <div class="sp5">
          <span class="sp4">{{item.name}}</span>
          <span class="sp3">￥{{ item.price * item.count }}</span>
         </div>
          <div class="btn2">
             <Btns :item="item"></Btns>
            </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import store from "./store";
import Header from "./views/header.vue";
import Btns from "./views/tabs/btns.vue";
import { mapActions, mapMutations, mapState } from "vuex";
export default {
  data(){
    return {
      carLists:this.carList,
      color:"gray",
      backgroundColor:" rgba(213, 214, 215, 0.6)",
      fontSize:"14px",
      borderBottom:"2px gray solid",
      height:"40px",
      textAlign:"center",
      lineHeight:"40px",
    }
  },
  components: {
    Header,
    Btns,
  },
  computed: {
    ...mapState(["carList"]),
  },
  methods:{
   ...mapMutations(["clearList"]),
  }
};
</script>
<style lang="less" scoped>
.app {
  height: 100%;
  position: relative;
  .carList {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    // height:50px;
    .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(7, 17, 27, 0.6);
      // background: rgba(213, 214, 215, 0.6);
    }
    ul {
      position: absolute;
      bottom: 50px;
      width: 100%;
      left: 0;
      height: 200px;
      background: white;
      overflow-y: scroll;
      padding-bottom: 40px;
    }
    .sp{
      margin-left: 250px;
      color:deepskyblue;
    }
    .sp1{
      font-size: 15px;
      margin-left: 20px;
    }
    .sp5{
      display: flex;
      justify-content: space-between;
      flex: 1;
    }
  
  }
  .carLi{
    display: flex;
    justify-content: space-between;
    // height:96px;
    // overflow-y: scroll;
    background-color: white;
    border-bottom: 1px solid gray;
    text-align: center;
    line-height: 45px;
    color: black;
    // overflow-y: auto;
    .sp3{
    // margin-left: 160px;
    color: red;
   }
   .sp4{
  font-weight: 900;
   }
  }

}
.tabs {
  height: 72%;
  overflow: hidden;
  background-color: white;
  ul {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    li {
      height: 40px;
      line-height: 40px;
    }
  }
}
.carList ul li {
  display: flex;
}
.btn2{
  margin-left: 10px;
  margin-top: 10px;
}

</style>
